<template>
    <div class="ruralecommerce">
        <div class="left">
            <div>
                <div>
                    <xiaofeizhediyufenbu></xiaofeizhediyufenbu>
                </div>
                <div>
                    <xiaofeizhenianlingfenbu></xiaofeizhenianlingfenbu>
                </div>
            </div>
            <div>
                <div>
                    <div>
                        <fenxiandianshangahngyefenbu></fenxiandianshangahngyefenbu>
                    </div>
                    <div>
                        <dianshangchanpinshujufenxi></dianshangchanpinshujufenxi>
                    </div>
                </div>
                <div>
                    <wangluolingshoueyuequshi></wangluolingshoueyuequshi>
                </div>
            </div>
            <div>
                <div>
                    <shejiaodianshang></shejiaodianshang>
                </div>
                <div>
                    <zhibodianshang></zhibodianshang>
                </div>
                <div>
                    <wuliujianshe></wuliujianshe>
                </div>
            </div>
        </div>

        <div class="right">
            <div>
                <div>
                    <pingguodianshangguanjianzhibiaoshuju></pingguodianshangguanjianzhibiaoshuju>
                </div>
                <div>
                    <div>
                        <pingguopingzhongzhanbi></pingguopingzhongzhanbi>
                    </div>
                    <div>
                        <pingguodianshangqudaoyuexiaoshouzoushi></pingguodianshangqudaoyuexiaoshouzoushi>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <niubangdianshangguanjianzhibiaoshuju></niubangdianshangguanjianzhibiaoshuju>
                </div>
                <div>
                    <div>
                        <xianniubangshououjia></xianniubangshououjia>
                    </div>
                    <div>
                        <niubangdianshangqudaoyuexiaoshouzoushi></niubangdianshangqudaoyuexiaoshouzoushi>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>


    import xiaofeizhediyufenbu from "./xiaofeizhediyufenbu"
    import xiaofeizhenianlingfenbu from "./xiaofeizhenianlingfenbu"
    import fenxiandianshangahngyefenbu from "./fenxiandianshangahngyefenbu"
    import dianshangchanpinshujufenxi from "./dianshangchanpinshujufenxi"
    import wangluolingshoueyuequshi from "./wangluolingshoueyuequshi"
    import shejiaodianshang from "./shejiaodianshang"
    import zhibodianshang from "./zhibodianshang"
    import wuliujianshe from "./wuliujianshe"
    import pingguodianshangguanjianzhibiaoshuju from "./pingguodianshangguanjianzhibiaoshuju"
    import pingguopingzhongzhanbi from "./pingguopingzhongzhanbi"
    import pingguodianshangqudaoyuexiaoshouzoushi from "./pingguodianshangqudaoyuexiaoshouzoushi"
    import niubangdianshangguanjianzhibiaoshuju from "./niubangdianshangguanjianzhibiaoshuju"
    import xianniubangshououjia from "./xianniubangshououjia"
    import niubangdianshangqudaoyuexiaoshouzoushi from "./niubangdianshangqudaoyuexiaoshouzoushi"

    export default {

        components: {
            xiaofeizhediyufenbu,
            xiaofeizhenianlingfenbu,
            fenxiandianshangahngyefenbu,
            dianshangchanpinshujufenxi,
            wangluolingshoueyuequshi,
            shejiaodianshang,
            zhibodianshang,
            wuliujianshe,
            pingguodianshangguanjianzhibiaoshuju,
            pingguopingzhongzhanbi,
            pingguodianshangqudaoyuexiaoshouzoushi,
            niubangdianshangguanjianzhibiaoshuju,
            xianniubangshououjia,
            niubangdianshangqudaoyuexiaoshouzoushi
        },
        data() {
            return {}
        }
    };
</script>

<style lang="scss" scoped>
    .ruralecommerce {
        width: 100%;
        height: 100%;
        padding: 20px;
        display: flex;

        > div {
            &:first-child {
                width: 43%;
                display: flex;
                > div {
                    &:first-child {
                        width: 25%;
                        display: flex;
                        flex-direction: column;
                        > div {
                            flex: 1;
                            &:nth-of-type(2) {
                                margin-top: 40px;
                            }
                        }
                    }
                    &:nth-of-type(2) {
                        width: 50%;
                        margin: 0 40px;

                        display: flex;
                        flex-direction: column;
                        > div {
                            flex: 1;
                            &:first-child {
                                display: flex;
                                margin-bottom: 40px;
                                > div {
                                    flex: 1;
                                    &:last-child {
                                        margin-left: 40px;
                                    }
                                }
                            }

                        }

                    }
                    &:last-child {
                        width: 25%;
                        display: flex;
                        flex-direction: column;
                        > div {
                            flex: 1;
                            &:first-child{
                                height: 40%;
                            }
                            &:nth-of-type(2) {
                                /*background: red;*/
                                margin: 40px 0;
                                height: 45%;
                            }
                        }
                    }
                }
            }
            &:last-child {
                flex: 1;
                margin-left: 40px;

                display: flex;
                > div {
                    flex: 1;
                    &:first-child {
                        margin-right: 40px;
                    }
                    display: flex;
                    flex-direction: column;
                    > div {
                        &:first-child {
                            height: 32%;
                        }
                        &:last-child {
                            flex: 1;
                            display: flex;
                            margin-top: 40px;
                            > div {

                                &:first-child {
                                    width: 40%;
                                }
                                &:last-child {
                                    margin-left: 40px;
                                    flex: 1;
                                }
                            }
                        }
                    }
                }
            }
        }

    }
</style>
